<template>
  <div class="app">
    <div class="demo-image">
      <el-image style="width: 100%; height: 100%" :src="url"></el-image>
      <div class="box">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item prop="loginName">
            <el-input
              @change="login"
              class="in-put"
              placeholder="请输入账号"
              prefix-icon="el-icon-mobile-phone"
              v-model="form.loginName"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              @change="login"
              class="in-put"
              placeholder="请输入密码"
              ref="inpt"
              :type="show"
              prefix-icon="el-icon-lock"
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              @change="login"
              class="in-put"
              placeholder="请输入验证码"
              prefix-icon="el-icon-circle-check"
              v-model="form.code"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="img">
          <img src="https://likede2-admin.itheima.net/img/logo.595745bd.png" alt />
        </div>
        <div class="btn">
          <el-button :loading="loading" @click="login" ref="login">登录</el-button>
        </div>
        <div class="box1" @click="add">
          <i class="element-icons el-icon-yanjing_bi" v-if="isshow"></i>
          <i class="element-icons el-icon-faxian-yanjing" v-else></i>
        </div>
        <div class="box2" @click="addimg">
          <img :src="src" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { getYzm, getlogin } from '@/api/user'
export default {
  name: 'DekedeIndex',
  data () {
    return {
      loading: false,
      url: 'https://likede2-admin.itheima.net/img/background.be4fae7d.png',
      form: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: '',
        loginType: 0
      },
      img: '',
      isshow: true,
      show: 'password',
      src: '',
      rules: {
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 10, message: '账号为3~10位', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '密码为3~10位', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { max: 4, message: '验证码为4位', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.yzm()
  },
  methods: {
    add () {
      this.isshow = !this.isshow
      if (this.isshow === true) {
        this.show = 'password'
      } else {
        this.show = 'none'
      }
      this.$nextTick(() => {
        this.$refs.inpt.focus()
      })
    },
    async yzm () {
      // 获取33个随机数
      const str1 =
        '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
      const str2 = str1.split('')
      // console.log(str2)
      let str3 = ''
      for (let i = 0; i < 33; i++) {
        str3 += str2[Math.ceil(Math.random() * str2.length - 1)]
      }
      // 发送请求
      this.form.clientToken = str3
      const img = await getYzm(str3)
      // console.log(img)
      // 通过filters过滤器处理数据
      this.src = window.URL.createObjectURL(img)
    },
    ...mapMutations('user', ['gettoken', 'updatatime']),
    // 登录接口
    async login () {
      try {
        const val = this.$refs.form.validate()
        if (val) {
          this.loading = true
          const res = await getlogin(this.form)
          // console.log(res)
          if (res.token === null) {
            this.$message.error(res.msg)
            this.loading = false
          } else {
            this.$message.success(res.msg)
            this.gettoken({ token: res.token, userName: res.userName })
            this.updatatime(Date.now())
            this.$router.push('/')
          }
        }
      } catch (e) {
        console.log(e)
      }
    },
    addimg () {
      this.yzm()
    }
  }
}
</script>

<style lang="less" >
.app {
  height: 900px;
  .demo-image {
    position: fixed !important;
    top: 0;
    left: 0;
    position: relative;
    .box {
      top: 0;
      left: 0;
      margin-left: 35%;
      margin-top: 10%;
      position: absolute;
      height: 400px;
      width: 580px;
      border-radius: 10px;
      background-color: #ffffff;
      .el-form {
        margin-top: 40px;
        .el-form-item {
          margin-bottom: 10px;
          .icon-phone::before {
            display: block;
            margin-top: 50px;
          }
          .in-put {
            margin-left: -40px;
            margin-top: 25px;
            input {
              height: 50px;
              border-radius: 5px;
            }
            .el-input__prefix {
              display: inline-block;
              width: 16px;
              height: 16px;
              margin-top: 5px;
              font-size: 16px;
            }
          }
        }
      }

      .img {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 50px;
        margin-top: -50px;
        margin-right: 250px;
        img {
          width: 100%;
        }
      }
      .btn {
        position: absolute;
        bottom: 8;
        right: 0;
        margin: 10px 40px;
        button {
          text-align: center;
          width: 500px;
          height: 50px;
          background-color: #6f80f0;
          span {
            color: #fff;
          }
        }
      }
      .box1 {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 165px;
        z-index: 99999;
        margin-right: 60px;
        font-size: 18px;
      }
      .box2 {
        position: absolute;
        bottom: 0;
        right: 0;
        margin-right: 40px;
        margin: 116px 40px;
        width: 130px;
        height: 50px;
        border-radius: 5px;
      }
    }
  }
}
.yzm {
  height: 50px;
  width: 130px;
  img {
    width: 100%;
    background-color: pink;
  }
}
</style>
